import { Image, StyleSheet, View, ScrollView, Pressable } from 'react-native';
import { Link, useRouter } from 'expo-router';
import React from 'react'
import { HelloWave } from '@/components/HelloWave';
import { Icon, IconElement, TopNavigation, Button, TopNavigationAction, Text, Calendar, Layout, I18nConfig, NativeDateService } from '@ui-kitten/components';
import Swiper from 'react-native-swiper';
const i18n: I18nConfig = {
  dayNames: {
    short: ['日', '一', '二', '三', '四', '五', '六'],
    long: ['周日', '周一', '周二', '周三', '周四', '周五', '周日六'],
  },
  monthNames: {
    short: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
    long: [
      '1月',
      '2月',
      '3月',
      '4月',
      '5月',
      '6月',
      '7月',
      '8月',
      '9月',
      '10月',
      '11月',
      '12月',
    ],
  },
};
const localeDateService = new NativeDateService('ru', { i18n, startDayOfWeek: 1 });

const tabs = [
  { text: '全部', key: 'all' },
  { text: '已完成', key: '1' },
  { text: '进行中', key: '2' },
  { text: '未完成', key: '3' },
]

export default function IndexTabScreen() {
  const [date, setDate] = React.useState(new Date());
  const [tab, setTab] = React.useState('all');
  const router = useRouter()
  const handleGoDetail = () => {
    router.push('/taskDetail')
  }
  return (
    <>
      <TopNavigation alignment='center' title="每日" />
      <ScrollView keyboardShouldPersistTaps='always'>
        <View style={{ padding: 10, paddingBottom: 0 }}>
          <Layout style={{ flexDirection: 'row' }}>
            <Calendar
              dateService={localeDateService}
              style={{ flex: 1 }}
              date={date}
              onSelect={nextDate => setDate(nextDate)}
            />
          </Layout>
          <Text style={styles.title}>
            我的任务
          </Text>
        </View>
        <View>
          <ScrollView horizontal>
            {
              tabs.map((el, index) => <Text key={index} onPress={() => setTab(el.key)} style={{ ...styles.tabs, fontWeight: el.key === tab ? 700 : 400, color: el.key === tab ? '#000' : '#666' }}>{el.text}</Text>)
            }
          </ScrollView>
        </View>
        <View style={{ padding: 10, height: 170 }}>
          <Swiper
            style={styles.swiperStyle}
            // 这个很重要，解决白屏问题
            removeClippedSubviews={false}
            // 切换时间，单位秒
            autoplayTimeout={5}
            // 是否自动轮播
            autoplay={true}
            // 如果为true，滚动方向是横向的，如果为false,滚动方向是纵向的，
            horizontal={true}
            paginationStyle={{ bottom: 0 }}
            dot={<View style={[styles.dotStyle, styles.dotCommonStyle]} />}
            activeDot={<View style={[styles.activeDotStyle, styles.dotCommonStyle]} />}
          >
            {
              [1, 2].map((el, index) => <Pressable style={styles.bannerStyle} key={index} onPress={() => handleGoDetail()}>
                <Image src="" style={{ width: 100, height: 100, backgroundColor: '#F3F3F3FF' }}></Image>
                <Layout style={{ justifyContent: 'space-between', marginLeft: 10, flex: 1 }}>
                  <View>
                    <Text style={{ fontSize: 18 }}>任务名称XXXXXXXXXXXX</Text>
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                      <Icon fill='#8F9BB3' style={{ width: 18, height: 18, marginRight: 5 }} name="compass-outline"></Icon>
                      <Text style={{}}>任务截止时间:2025.01.09</Text>
                    </View>
                  </View>
                  <Layout style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                    <Text style={{ color: '#FF0000', fontSize: 12 }}>任务状态：未开始</Text>
                    <Button status='basic' style={{ borderRadius: 50 }}>立即开始</Button>
                  </Layout>
                </Layout>
              </Pressable>)
            }
          </Swiper>
        </View>
        <View style={{ padding: 10, paddingTop: 0 }}>
          <Text style={{ ...styles.title, marginTop: 0 }}>
            情绪记录
          </Text>
          <Layout style={{ padding: 10, borderRadius: 8 }}>
            <Text style={{ fontSize: 16 }}>情绪记录名称</Text>
            <Text style={{ fontSize: 13, marginVertical: 10 }}>情绪记录时间：2024-11-26 11:00-12:00</Text>
            <Text style={{ fontSize: 13 }}>记录人：XXX</Text>
            <Text style={{ fontSize: 13, marginTop: 10, color: '#f00' }}>记录状态：沮丧</Text>
          </Layout>
        </View>
      </ScrollView>
    </>
  );
}

const styles = StyleSheet.create({
  title: {
    fontSize: 16,
    marginTop: 10,
    marginBottom: 10
  },
  tabs: {
    padding: 5,
    paddingHorizontal: 20,
    borderRadius: 30,
    margin: 10,
    marginTop: 0,
    backgroundColor: '#ffffff',
    fontSize: 18,
    height: 36
  },
  activeTab: {
    fontWeight: 600
  },
  swiperStyle: {
    height: 150,
  },
  bannerStyle: {
    borderRadius: 8,
    backgroundColor: '#fff',
    flexDirection: 'row',
    padding: 10
  },
  dotStyle: {
    width: 8,
    backgroundColor: '#0F0F0F4D',
  },
  activeDotStyle: {
    width: 16,
    backgroundColor: '#0f0f0f',
  },
  dotCommonStyle: {
    borderRadius: 8,
    marginLeft: 5,
    height: 8,
  },
});
